<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item,i) in list" :key="i" @click="handleClick(i)">
				<u-lazy-load threshold="-100" border-radius="20" :image="item.face_url" :index="index"></u-lazy-load>
				<view class="title">{{item.brand}} {{item.name}}</view>
				<view class="list-content">{{item.descrip}}</view>
				<view class="num"><text>所需积分:</text><text>{{item.integral}}</text></view>
			</view>
		</view>
		<no-data :src="noDataSrc" :txt="'暂无积分商品'" v-if="!list.length"></no-data>
	</view>
</template>
<script>
export default {
	name: 'MallList',
	data() {
		return {
			noDataSrc:this.$noData,
		};
	},
	props: {
		list: {
			type:Array,
			default:[]
		}
	},
	methods:{
		handleClick(i){
			this.$emit('click',i);
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding:0 24rpx;
	}
	.item{
		width:49%;
		border-radius:20rpx;
		overflow: hidden;
		margin-bottom: 2%;
		background-color:#fff;
	}
	.item:nth-child(2n+1){
		margin-right:2%;
	}
	.item-image{
		width:100%;
		display: block;
	}
	.title{
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		background-color:#fff;
		padding:20rpx;
		padding-bottom: 0;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.list-content{
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		background-color:#fff;
		padding:0 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		height:90rpx;
	}
	.num{
		text-align: right;
		background-color:#fff;
		padding:20rpx;
		padding-top: 0;
	}
	.num text:nth-child(1){
		font-size: 22rpx;
		font-weight: 500;
		color: #999;
	}
	.num text:nth-child(2){
		font-size: 30rpx;
		font-weight: 500;
		color: #FF0303;
	}
</style>
